BootstrapVue — Input Group Customizations and Jumbotrons

To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to customize input groups and creating jumbotrons.

Radio Button Addon

We can add a radio button to the input group’s left or right side with BootstrapVue’s b-form-radio component.

For example, we can write:

<template>
  <div id="app">
    <b-input-group>
      <b-input-group-prepend is-text>
        <b-form-radio></b-form-radio>
      </b-input-group-prepend>
      <b-form-input></b-form-input>
    </b-input-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Switches

We can add a switch to the left or right of the input group with the b-form-checkbox component.

For example, we can write:

<template>
  <div id="app">
    <b-input-group>
      <b-input-group-prepend is-text>
        <b-form-checkbox switch></b-form-checkbox>
      </b-input-group-prepend>
      <b-form-input></b-form-input>
    </b-input-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

The switch prop makes the checkbox a switch style checkbox.

Multiple Inputs

We can have multiple inputs in our input groups.

For example, we can write:

<template>
  <div id="app">
    <b-input-group prepend="names">
      <b-form-input placeholder="first name"></b-form-input>
      <b-form-input placeholder="last name"></b-form-input>
    </b-input-group>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have 2 input boxes side by side along with the ‘names’ text prepended to the 2 input boxes.

Multiple Addons

We can have multiple addons side by side.

All we have to do is to place them where we want to.

For example, we can write:

<template>
  <div id="app">
    <b-input-group>
      <b-input-group-prepend is-text>
        <input type="checkbox">
      </b-input-group-prepend>
      <b-input-group-prepend is-text>
        <b>$</b>
      </b-input-group-prepend>
      <b-form-input placeholder="name"></b-form-input>
    </b-input-group>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We have 2 b-oinput-group-prepend components besides each other.

Dropdown Addons

We can add drop downs as add-ons to an input group.

We just have to put them in the prepend and append slots.

For instance, we can write:

<template>
  <div id="app">
    <b-input-group>
      <template v-slot:prepend>
        <b-dropdown text="fruit" variant="info">
          <b-dropdown-item>apple</b-dropdown-item>
          <b-dropdown-item>orange</b-dropdown-item>
        </b-dropdown>
      </template>

      <b-form-input placeholder="name"></b-form-input>
    </b-input-group>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We have the template tag that populates the prepend slot as indicated by the v-slot:prepend directive.

We placed our b-dropdown inside it.

Now we’ll see the dropdown on the left of the input box.

Likewise, we can change prepend to append if we want to place our dropdown to the right of our input box.

Control Sizing

We can change the sizing of the form group with the size prop.

For example, we can write:

<template>
  <div id="app">
    <b-input-group size="sm" prepend="label">
      <b-form-input placeholder="name"></b-form-input>
    </b-input-group>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

The whole form group is shrunk because the size prop is set to 'sm' .

We can also set it to 'lg' to make it bigger.

Sizing Custom Radio, Checkbox and Switch Addons

The size prop is added to the b-input-group to change the size of everything in the form group.

Validation States

Input groups don’t support validation state displays.

But the input inside it does support this feature.

Jumbotron

A jumbotron is a component that can extend the entire viewport to showcase marketing messages on our site.

We can set the heading and lead text using the header and lead props.

Also, we can use the header and lead named slots if we need to show HTML.

For example, we can write:

<template>
  <div id="app">
    <b-jumbotron header="Hello" lead="Lead">
      <p>World</p>
      <b-button variant="primary" href="#">Go Somewhere</b-button>
    </b-jumbotron>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We have the b-jumbotron component with the header prop set to 'Hello' .

It’s displayed at the top and it’s the largest.

lead is set to 'Lead' and it’s displayed below the header text.

The content inside the tags is displayed inside the box.

Conclusion

We can add items to the input groups we addons.

Also, we can add a jumbotron component to display text that will catch people’s attention.